import Vue from 'vue'
import VueRouter from 'vue-router'
import { getToken } from '@/utils/token'
// import Login from '@/views/Login' // @代表src文件夹
// import Layout from '@/views/Layout'
// import Home from '@/views/Home'
// import User from '@/views/User'
// import Search from '@/views/Search'
// import SearchResult from '@/views/Search/SearchResult.vue'
// import ArticleDetail from '@/views/ArticleDetail'
// import UserEdit from '@/views/User/UserEdit'
// import Chat from '@/views/Chat'

// 总结：
// 路由懒加载：为了让第一个页面，加载的app.js小一点，打开网页快一点
// 思路：把组件对应js，分成若干个.js，路由切换到哪个页面，才去加载对应的.js文件
// 原来的不行是因为：webpack分析入口时，发现router里上来就import所有页面，所以直接打包进app.js，导致文件很大
// 解决：当路由路径匹配规则时，才现去import引入对应的组件JS文件

Vue.use(VueRouter)

const routes = [{
  path: '/',
  redirect: '/layout/home' // 默认显示和layout和layout下的首页
},
{
  path: '/login',
  // component: Login
  component: () => import('@/views/Login'),
  // 路由独享守卫
  beforeEnter(to, from, next) {
    if (getToken()?.length > 0 && to.path === '/login') {
      // next(false) // 阻止跳转留在原地，或者什么都不写 (也就是说不能手动切回到登录页了)
      // 想要进登录页不留在原地了，而是返回首页
      next('/layout/home')
    } else {
      next() // 其他情况统统放行
    }
  }
},
{
  path: '/layout',
  // component: Layout,
  component: () => import('@/views/Layout'), // 把原来from后面的路径拿过来就可以了
  children: [
    {
      path: 'home', // 二级路由不能写/ 在一级挂载点页面的children里面配置
      // component: Home
      component: () => import('@/views/Home'),
      meta: {
        scrollT: 0 // 保存首页离开时，滚动条的位置
      }
    },
    {
      path: 'user', // 二级路由不能写/
      // component: User
      component: () => import('@/views/User')

    }
  ]
},
{
  path: '/search',
  // component: Search
  component: () => import('@/views/Search')

},
// 整个页面被切换掉就是发生路由跳转就不是嵌套路由(看是不是在layout那个外壳里面跳转的，看跳转之后有没有那层壳了)
// 搜索结果页面
// 路径第二段要带值(路径传参：)，路由规则才能命中，才能把SearchResult挂载到一级路由点
// 路由两种传参方式：路径传参(:冒号传参)/ ?问号传参
{
  path: '/search_result/:kw',
  // component: SearchResult
  component: () => import('@/views/Search/SearchResult')

},
// 文章的详情页
// 问号传参
{
  path: '/detail',
  // component: ArticleDetail
  component: () => import('@/views/ArticleDetail')

},
// 用户资料编辑路由
{
  path: '/user_editor',
  // component: UserEdit
  component: () => import('@/views/User/UserEdit')

},
// 聊天页面
{
  path: '/chat',
  // component: Chat
  component: () => import('@/views/Chat')

}
]
const router = new VueRouter({
  routes
})
// 路由-全局前置守卫(在路由发生真正跳转之前，执行此函数)
// 从函数可以决定路由是否跳转/取消/强制切换到别的路由上
// 有token, 不能去登录页
// 无token, 需要用户"权限"的才需要去登录页
// router.beforeEach((to, from, next) => {
//   // 需求：如果你已经登录了，证明有token，不能切换到登录页面
//   if (getToken()?.length > 0 && to.path === '/login') {
//     next(false) // 阻止跳转留在原地，或者什么都不写 (也就是说不能手动切回到登录页了)
//   想要进登录页不留在原地了，而是返回首页
//     next('/layout/home')
//   } else {
//     next() // 其他情况统统放行
//   }
// })
export default router
